<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('我的待办')" />
    <style>
        #df{
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        #df>div{
            background-color: white;
            width: 28%;
            height: 0;
            padding-bottom: 13%;
            margin: 1% 0;
        }
        #df>div:hover{
            cursor: pointer;
            box-shadow: 1px 1px 1px #DDDDDD;
        }
    </style>
</head>
<body class="gray-bg">
	<div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="role-form">
					<div class="select-list">
						<ul>
							<li>
								<p>标题：</p>
								<input type="text" name="title"/>
							</li>
							<li class="select-time">
								<p>创建时间：</p>
								<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="beginTime"/>
								<span>-</span>
								<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endTime"/>
							</li>
							<li>
								<p>流程实例ID：</p>
								<input type="text" name="instanceId"/>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>


	        
	        <div class="col-sm-12 select-table table-striped">
			    <table id="bootstrap-table"></table>
			</div>
		</div>
	</div>
<th:block th:include="include :: footer" />
<!--<script th:src="@{/js/activiti.js}"></script>-->
<script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('system:role:edit')}]];
var removeFlag = [[${@permission.hasPermi('system:role:remove')}]];
var prefix = ctx + "act/processTask";


$(function() {
    var options = {
        url: prefix + "/getMyTask",
        createUrl: prefix + "/add",
        updateUrl: prefix + "/edit/{id}",
        removeUrl: prefix + "/remove",
        exportUrl: prefix + "/export",
        modalName: "待办任务列表",
        columns: [{
            checkbox: true
        },
        {
			field : 'taskId',
			title : '任务ID',
			visible: false
        },
        {
            field: 'processName',
            title: '流程名称',
            sortable: true
        },
        {
            field: 'createTime',
            title: '发起时间',
            sortable: true
        },
        {
            field: 'creater',
            title: '发起人',
            sortable: true
        },
        {
            title: '操作',
            align: 'center',
            formatter: function(value, row, index) {
                var actions = [];
				actions.push('<a class="btn btn-primary btn-xs" href="javascript:void(0)" onclick="dealTask(\'' + row.taskId + '\')"><i class="fa fa-eye"></i> 处理</a> ');
				actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="showHistoryDialog(\'' + row.instanceId + '\')"><i class="fa fa-list"></i> 审批历史</a> ');
				actions.push('<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="showProcessImgDialog(\'' + row.instanceId + '\')"><i class="fa fa-image"></i> 进度查看</a> ');
				actions.push('<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="returnTask(\'' + row.taskId + '\')"><i class="fa fa-image"></i> 交还</a> ');
				return actions.join('');
            }
        }]
    };
    $.table.init(options);
});

function dealTask(taskId) {
	var url = prefix + '/taskForm?taskId=' + taskId;
	$.modal.open("任务处理", url, null, null, null, true);
}

/* 查看审批历史 */
function showHistoryDialog(instanceId) {
	var url = prefix + '/goHisTasks/' + instanceId;
	$.modal.open("查看审批历史", url, null, null, null, true);
}

function showProcessImgDialog(instanceId) {
	var url = prefix + '/processImg/' + instanceId;
	$.modal.open("查看流程图", url, null, null, null, true);
}
function returnTask(taskId){
	$.ajax({
		url: prefix + "/returnTask?taskId="+taskId,
		type: "post",
		success: function(res){
			if (res.code == 0) {
				$.modal.msgSuccess("交还成功");
			} else {
				$.modal.msgError(res.msg);
			}
		},
		error: function(res){
			$.modal.msgError(res.msg);
		}
	})
}
</script>
</body>
</html>